<template>
  <div class="app-container">
    <div style="padding: 30px 0 10px;font-size: 14px;display: flex;justify-content: space-between;align-items: center">
      <div>共<span style="color:#f49352;">{{ total }}</span>种角色</div>
      <div>
        <router-link to="/liansuo/userauthedit">
          <el-button type="primary">创建角色</el-button>
        </router-link>
      </div>
    </div>
    <el-table
      key="table0"
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100%"
      :row-style="{ background: '#f2f2f2' }"
    >

      <div slot="empty" class="m-empty-box">
        <div class="mar" style="width: 168px;height: 180px;">
          <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
        </div>
        <div class="title">暂无数据</div>
      </div>
      <el-table-column label="角色名称" width="200px">
        <template slot-scope="{row}">
          <div style="display:flex;">
            <span style="height:30px; line-height: 30px;">{{ row.title }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="角色属性">
        <template slot-scope="{row}">
          <span>{{ row.brief }}</span>
        </template>
      </el-table-column>

      <el-table-column label="人数">
        <template slot-scope="{row}">
          <span>{{ row.count }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <router-link :to="'/liansuo/userauthedit?id='+row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              详情
            </el-button>
          </router-link>
          <el-button v-if="row.can_del == 1" type="primary" size="small" icon="el-icon-delete" @click="delauth(row.id)"  style="margin-left: 20px;">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
// import fetchList from '@/api/article'
import Pagination from '@/components/Pagination'
import { getXuan } from '@/utils/limits.js'
import { AuthList, editbrandhead,Del } from '@/api/brand'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      status: {},
      role: {},
      roleIndex: '',
      statusIndex: 0
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '角色权限',
      url: '/liansuo/userauth',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })

    this.getList()
  },
  methods: {
    delauth(id) {
      var params = {
        id: id
      }
      this.$confirm('确定删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Del(params).then(response => {
          const {
            data
          } = response
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
          this.listLoading = false
        }).catch(error => {
          console.log(error)
          this.listLoading = false
        })
      }).catch(() => {})
    },
    getList() {
      this.listLoading = true
      const params = {
        page: this.listQuery.page,
        pagesize: this.listQuery.limit
      }
      AuthList(params).then(response => {
        const {
          data
        } = response
        console.log(data.data);
        this.list = data.data
        this.total = data.total
        this.listLoading = false
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      console.log(val.length)
      this.xuancount = val.length
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0 63px 20px;
}
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.typelists {
  cursor: pointer;
  margin-right: 30px;
  margin-bottom: 10px;
  vertical-align: middle;
  font-size: 12px;
}

.typexuan {
  color: #41c3a8;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #616b74;
  color: #fff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr > td {
  color: #000;
}

/* ::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #616b74
} */
</style>
